<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商场监管详情</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!--1.width=device-width    //应用程序的宽度和屏幕的宽度是一样的
2.height=device-height  //应用程序的高度和屏幕的高是一样的
3.initial-scale=1.0  //应用程序启动时候的缩放尺度（1.0表示不缩放）
4.minimum-scale=1.0  //用户可以缩放到的最小尺度（1.0表示不缩放）
5.maximum-scale=1.0  //用户可以放大到的最大尺度（1.0表示不缩放）
6.user-scalable=no  //用户是否可以通过他的手势来缩放整个应用程序，使应用程序的尺度发生一个改变（yes/no）
    -->
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <link rel="stylesheet" href="style/weui.min.css"/>
    <link rel="stylesheet" href="style/style.css"/>
</head>
<body class="skin-gray" ontouchstart>
<div class="form-readonly">
    <!--盒子-->
    <div class="per-box">
        <!--盒子标题-->
        <div class="logo-box">
            <img src="images/logosmall.png" alt="" class="logo-title"> 博美信息中心
        </div>
        <!--end 盒子标题-->

        <!--编号-->
        <div class="weui-cells weui-cells_form">
            <div class="weui-cells__title item-title">编号：<span class="text-normal">cj201901030001</span></div>
        </div>
        <!--end-->

        <!--身份-->
        <div class="weui-cells weui-cells_form">
            <div class="weui-cells__title item-title">身份：<span class="text-normal">商场商家</span></div>
        </div>
        <!--end-->

        <!-- 商场-->
        <div class="weui-cells__title">商场</div>
        <div class="weui-cells">
            <div class="weui-cell weui-cell_select">
                <div class="weui-cell__bd">
                    <select class="weui-select" name="select1" disabled>
                        <option selected="" value="1">壹号商场</option>
                        <option value="2">贰号商场</option>
                        <option value="3">叁号商场</option>
                    </select>
                </div>
            </div>
        </div>
        <!--end 商场-->

        <!--输入框-->
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" value="陆丰" disabled/>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="tel"  value="15213180987" disabled/>
                </div>
            </div>
        </div>
        <!--end 输入框-->

        <!-- 问题内容-->
        <div class="weui-cells__title">问题内容</div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <textarea class="weui-textarea" placeholder="请输入详细情况" readonly>需要写问题原因一些文字一共16个子</textarea>
                    <!--<div class="weui-textarea-counter"><span>16</span>/200</div>-->
                </div>
            </div>
        </div>
        <!--end 问题内容-->

        <!--上传的图片-->
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <div class="weui-uploader">
                    <div class="weui-uploader__hd">
                        <p class="weui-uploader__title">附件</p>
                        <!--<div class="weui-uploader__info"><span id="uploadCount">3</span>/3</div>-->
                    </div>
                    <div class="weui-uploader__bd">
                        <ul class="weui-uploader__files" id="uploaderFiles">
                            <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
                            <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
                            <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="weui-gallery" id="gallery">
            <span class="weui-gallery__img" id="galleryImg"></span>
        </div>
        <!--end 上传的图片-->
        <div class="foot-btn-box">
            <a href="javascript:;" class="weui-btn weui-btn_primary">去处理</a>
        </div>

    </div>
    <!--end 盒子-->
</div>
<script src="js/zepto.min.js"></script>
<script type="text/javascript">

    //图片预览
    $(function() {
        var tmpl = '<li class="weui-uploader__file" id="#ImgID#" style="background-image:url(#url#)">' +
                        '</li>',
                $gallery = $("#gallery"),
                $galleryImg = $("#galleryImg"),
                $uploaderInput = $("#uploaderInput"),
                $uploaderFiles = $("#uploaderFiles");

        var index; //第几张图片
        $uploaderFiles.on("click", "li", function () {
            index = $(this).index();
            $galleryImg.attr("style", this.getAttribute("style"));
            $gallery.fadeIn(100);
        });
        $gallery.on("click", function () {
            $gallery.fadeOut(100);
        });


    });


</script>
</body>
</html>